﻿{% extends "base/index.html" %}


{% block center %}
    <!--用户信息-->
    <div class="panel panel-default center-top" style="min-width:auto;">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-6">
                    <a href="" class="btn btn-sm btn-success" data-toggle="modal" data-target="#permsModal"> 添加 </a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div style="margin-bottom: 10px;">
                <div class="col-sm-12">
                    <table class="table table-hover">
                        <thead>
                        <tr style="background-color: #f5f5f5;">
                            <th>权限</th>
                            <th>类型</th>
                            <th>url</th>
                            <th>Method</th>
                            <th>排序</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="perms_table">
                        {% for i in data_list %}
                            <tr>
                                <td><i class="fa {{ i.perms_icon }}" aria-hidden="true"></i>&emsp;{{ i.title }}</td>
                                {% if i.perms_type == "一级菜单" %}
                                    <td><span class="label label-success">{{ i.perms_type }}</span></td>
                                {% elif i.perms_type == "二级菜单" %}
                                    <td><span class="label label-info">{{ i.perms_type }}</span></td>
                                {% else %}
                                    <td><span class="label label-primary">{{ i.perms_type }}</span></td>
                                {% endif %}
                                <td>{{ i.url }}</td>
                                <td>{{ i.perms_method }}</td>
                                <td>{{ i.weight }}</td>
                                <td style="padding-left:5px;">
                                    <a href="javascript:;" style="text-decoration:none;" name="edit-perms"
                                       perms_id="{{ i.id }}" data-toggle="tooltip" data-placement="left"
                                       title="修改"><span class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:;" style="text-decoration:none;" name="del-perms"
                                       perms_id="{{ i.id }}" data-toggle="tooltip" data-placement="right"
                                       title="删除"><span class="fa fa-trash"></span> </a>
                                </td>
                            </tr>
                            {% for j in i.child %}
                                <tr>
                                    <td style="padding-left: 25px;"><i class="fa {{ j.perms_icon }}"
                                                                       aria-hidden="true"></i>&emsp;{{ j.title }}</td>
                                    {% if j.perms_type == "一级菜单" %}
                                        <td><span class="label label-success">{{ j.perms_type }}</span></td>
                                    {% elif j.perms_type == "二级菜单" %}
                                        <td><span class="label label-info">{{ j.perms_type }}</span></td>
                                    {% else %}
                                        <td><span class="label label-primary">{{ j.perms_type }}</span></td>
                                    {% endif %}
                                    <td>{{ j.url }}</td>
                                    <td>{{ j.perms_method }}</td>
                                    <td>{{ j.weight }}</td>
                                    <td style="padding-left:5px;">
                                        <a href="javascript:;" style="text-decoration:none;" name="edit-perms"
                                           perms_id="{{ j.id }}" data-toggle="tooltip" data-placement="left" title="修改"><span
                                                class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;
                                        <a href="javascript:;" style="text-decoration:none;" name="del-perms"
                                           perms_id="{{ j.id }}" data-toggle="tooltip" data-placement="right"
                                           title="删除"><span class="fa fa-trash"></span> </a>
                                    </td>
                                </tr>
                                {% for k in j.child %}
                                    <tr>
                                        <td style="padding-left: 40px;"><i class="fa {{ k.perms_icon }}"
                                                                           aria-hidden="true"></i>&emsp;{{ k.title }}
                                        </td>
                                        {% if k.perms_type == "一级菜单" %}
                                            <td><span class="label label-success">{{ k.perms_type }}</span></td>
                                        {% elif k.perms_type == "二级菜单" %}
                                            <td><span class="label label-info">{{ k.perms_type }}</span></td>
                                        {% else %}
                                            <td><span class="label label-primary">{{ k.perms_type }}</span></td>
                                        {% endif %}
                                        <td>{{ k.url }}</td>
                                        <td>{{ k.perms_method }}</td>
                                        <td>{{ k.weight }}</td>
                                        <td style="padding-left:5px;">
                                            <a href="javascript:;" style="text-decoration:none;" name="edit-perms"
                                               perms_id="{{ k.id }}" data-toggle="tooltip" data-placement="left"
                                               title="修改"><span class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;
                                            <a href="javascript:;" style="text-decoration:none;" name="del-perms"
                                               perms_id="{{ k.id }}" data-toggle="tooltip" data-placement="right"
                                               title="删除"><span class="fa fa-trash"></span> </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="text-right" style="margin-top:-30px;padding-right:9%">
                        <ul class="pagination" id="pager">
                            <li class="previous"><a href="/rbac/perms/1/">首页</a></li>
                            {#上一页按钮开始#}
                            {# 如果当前页有上一页#}
                            {% if data_list.has_previous %}
                                {#  当前页的上一页按钮正常使用#}
                                <li class="previous"><a href="/rbac/perms/{{ data_list.previous_page_number }}/">上一页</a>
                                </li>
                            {% else %}
                                {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                            {% endif %}
                            {#上一页按钮结束#}
                            {# 页码开始#}
                            {% for num in page_list %}
                                {% if num == currentPage %}
                                    <li class="item active"><a href="/rbac/perms/{{ num }}/">{{ num }}</a></li>
                                {% else %}
                                    <li class="item"><a href="/rbac/perms/{{ num }}/">{{ num }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {#页码结束#}
                            {# 下一页按钮开始#}
                            {% if data_list.has_next %}
                                <li class="next"><a href="/rbac/perms/{{ data_list.next_page_number }}/">下一页</a></li>
                            {% else %}
                                <li class="next disabled"><a href="javascript:;">下一页</a></li>
                            {% endif %}
                            <li class="previous"><a href="/rbac/perms/{{ page_nums }}/">尾页</a></li>
                            {# 下一页按钮结束#}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

<!-- Modal -->
{% block modal %}

    <div class="modal fade" id="permsModal" tabindex="-1" perms="dialog" aria-labelledby="permsModalLabel">
        <div class="modal-dialog" perms="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="permsModalLabel">添加权限</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <span style="color: red">*</span><label>权限</label>
                        <input class="form-control" placeholder="权限" id="title">
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>类型</label>
                        <select class="form-control" id="perms-type">
                            <option value="一级菜单">一级菜单</option>
                            <option value="二级菜单">二级菜单</option>
                            <option value="功能按钮">功能按钮</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>上级</label>
                        <select class="form-control" id="parent-id">
                            <option value="top">TOP</option>
                            {% for i in menus_list %}
                                <option value="{{ i.id }}">{{ i.title }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group" id="div-perms">
                        <label>菜单排序</label>
                        <input class="form-control" placeholder="菜单排序" id="weight">
                    </div>

                    <div class="form-group" id="div-perms">
                        <span style="color: red">*</span><label>地址</label>
                        <input class="form-control" placeholder="地址" id="url">
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>method</label>
                        <select class="form-control" id="perms-method">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>图标</label>
                        <input class="form-control" placeholder="参考：http://www.fontawesome.com.cn/faicons/"
                               id="perms-icon">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-perms">提交</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-permsModal" tabindex="-1" perms="dialog" aria-labelledby="edit-permsModalLabel">
        <div class="modal-dialog" perms="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-permsModalLabel">修改权限</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <span style="color: red">*</span><label>权限</label>
                        <input class="form-control" placeholder="权限" id="edit-title">
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>类型</label>
                        <select class="form-control" id="edit-perms-type">
                            <option value="一级菜单">一级菜单</option>
                            <option value="二级菜单">二级菜单</option>
                            <option value="功能按钮">功能按钮</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>上级</label>
                        <select class="form-control" id="edit-parent-id">
                            <option value="top">TOP</option>
                            {% for i in menus_list %}
                                <option value="{{ i.id }}">{{ i.title }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group" id="div-perms">
                        <label>菜单排序</label>
                        <input class="form-control" placeholder="菜单排序" id="edit-weight">
                    </div>

                    <div class="form-group" id="div-perms">
                        <span style="color: red">*</span><label>地址</label>
                        <input class="form-control" placeholder="地址" id="edit-url">
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>method</label>
                        <select class="form-control" id="edit-perms-method">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>图标</label>
                        <input class="form-control" placeholder="参考：http://www.fontawesome.com.cn/faicons/"
                               id="edit-perms-icon">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="edit-sub-perms">提交</button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script type="text/javascript" src="/static/mystyle/js/rbac.js"></script>
{% endblock %}


